<template>
  <div v-show="showing" id="errorModal">
    <div id="errorBk"></div>
    <div id="errorBack">
      <div id="errorTitle">
        <p :class="title1?errorPadding:errorP" v-if="title">{{title}}</p>
        <p :class="title2?errorPadding:errorP" v-if="title1">{{title1}}</p>
        <p :class="title2?errorPadding:errorP" v-if="title2">{{title2}}</p>
      </div>
      <div id="errorButton">
        <div class="cancel" @click="actionClickCancel" v-if="errorCancel" :style="{width:styleWidth}">取消</div>
        <div class="enter" @click.self="actionClickOk" :style="{width:styleWidth}">确定</div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" rel="stylesheet/scss" scoped>
  #errorModal {
    /*background-color: rgba(0, 0, 0, 0);*/
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 1000000;
    #errorBk {
      width: 100%;
      height: 100%;
      background: $color-black;
      opacity: 0.5;
    }
  }

  #errorBack {
    width: 5rem;
    background: $color-4;
    position: fixed;
    border-radius: 5px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /*background-color: rgba(50, 50, 50, 0.5);*/
    #errorTitle {
      background: #f1f1f1;
      .errorP{
        padding: 0.6rem 0rem;
        font-size: 0.26rem;
        color: $color-1;
      }
      .errorPadding{
        padding: 0.2rem 0rem;
        font-size: 0.26rem;
        color: $color-1;
      }
    }
    #errorButton {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: $color-4;
      font-size: 0.3rem;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      div {
        padding: 0.2rem 0rem;
      }
      .cancel {
        color: $color-1;
        background: $color-4;
      }
      .enter {
        background: $color-icbcRed;
      }
    }
  }
</style>
<script>
  export default{
    name: 'error',
    data(){
      return {
        errorPadding:'errorPadding',
        errorP:'errorP'
      };
    },
    props: {
      showing: Boolean,
      styleWidth: {
        type: String,
        default: '100%'
      },
      errorCancel: {
        type: Boolean
      },
      title: {
        type: String,
        default: ''
      },
      title1: {
        type: String,
        default: ''
      },
      title2: {
        type: String,
        default: ''
      },
      showError: {
        type: Boolean,
        default() {
          return false
        }
      },
      okCallback: {
        type: Function,
        default: null
      },
      cancelCallback: {
        type: Function,
        default: null
      }
    },
    watch: {
      showing: function (oldValue) {
        if (oldValue) {
          document.querySelector('body').style.overflow = 'hidden';
        } else {
          document.querySelector('body').style.overflow = 'auto';
        }
      }
    },
    components: {},
    methods: {
      actionClickOk: function () {
        if (this.okCallback) {
          this.okCallback();
        } else {
          this.$store.commit('showAlert', {show: false})
        }
      },
      actionClickCancel: function () {
        if (this.cancelCallback) {
          this.cancelCallback();
        } else {
          this.$store.commit('showAlert', {show: false})
        }
      }
    },
    mounted: function () {
    }
  };
</script>
